<template>
    <section class="VideoHouseDetails-box">
        <app-header ref="header"></app-header>

        <!--中间内容-->
        <div class="content">
            <div class="container">
                <a-breadcrumb class="title">
                    <a-breadcrumb-item><router-link to="/" title="首页" alt="首页">首页</router-link></a-breadcrumb-item>
                    <a-breadcrumb-item><router-link to="/Video" title="海外直播" alt="海外直播">海外直播</router-link></a-breadcrumb-item>
                    <a-breadcrumb-item><router-link :to="{path: 'VideoSecondaryList', query: {type: 2 }}" title="直播看房视频" alt="直播看房视频">直播看房视频</router-link></a-breadcrumb-item>
                    <a-breadcrumb-item>详情页</a-breadcrumb-item>
                </a-breadcrumb>
                <article class="main-content clearfix">
                    <h1>{{ isNull0(videoDetailsData.title) }}
                        <span><i class="iconfont icon-yanjing2"></i> {{ isNull0(videoDetailsData.pageView) }}人观看</span>
                    </h1>
                    <a-row :gutter="32">
                        <a-col :xs="24" :sm="24" :md="14" :lg="14" :xl="14" class="left-box" v-show="isLoggedIn">
                            <div v-html="videoDetailsData.video" v-if="videoDetailsData.video" class="video-box"></div>
                            <h5 v-else style="color: #fff; text-align: center;">暂未查询到数据！</h5>
                        </a-col>
                        <a-col :xs="24" :sm="24" :md="14" :lg="14" :xl="14" class="left-box" v-show="!isLoggedIn">
                            <article class="NotLoggedIn-box">
                                <img src="/static/img/NotLoggedIn-lock2.svg" alt="">
                                <p>更多信息请您 <a @click="cell_header_handleLoginModal">登录</a> 后查看</p>
                            </article>
                            <div class="NotLoggedIn-box-bg">
                                <img src="/static/img/VideoDetails-NotLoggedIn-bg.jpg" alt="">
                            </div>
                        </a-col>

                        <a-col :xs="24" :sm="24" :md="10" :lg="10" :xl="10" class="right-box">
                            <article class="house-details" v-if="videoDetailsData.houseId != '' && videoDetailsData.houseId != null">
                                <header v-if="EstateHouseDetails.minPrice">
                                    <span>售价：${{ isNull0(EstateHouseDetails.minPrice) }}万起</span> |
                                    <span>{{ isNull0_RMB(EstateHouseDetails.minPrice, '万起', isCurrency(EstateHouseDetails.countryName)) }}</span>
                                </header>
                                <header v-else>
                                    <span>售价：${{ isNull0(EstateHouseDetails.price) }}万</span> |
                                    <span>{{ isNull0_RMB(EstateHouseDetails.price, '万', isCurrency(EstateHouseDetails.countryName)) }}</span>
                                </header>
                                <p class="red">1美元 = {{ isNull0(exchangeRateUSD.exchangeRate ? exchangeRateUSD.exchangeRate.toFixed(3) : null) }}人民币（数据更新时间：{{momentFormat(exchangeRateUSD.releaseTime, 'YYYY-MM-DD')}}）</p>
                                <p class="fullAddress">{{ isNull0(EstateHouseDetails.address) }}</p>
                                <p>
                                    <span class="city">所属城市：{{ isNull0(EstateHouseDetails.cityName) }}</span>
                                    <span class="house-type">项目类型：{{ isNull0(EstateHouseDetails.projectType) }}</span>
                                </p>
                                <p class="dashed-bottom-border investment-type">投资类型：{{ isNull0(EstateHouseDetails.investmentType) }}</p>
                                <p class="Door-model">主力户型：{{ isNull0(EstateHouseDetails.houseType) }}</p>
                                <p class="dashed-bottom-border area">面积：{{ isNull0(EstateHouseDetails.minArea)}} {{isMinMaxArea(EstateHouseDetails.maxArea) }} </p>
                            </article>

                            <article class="video-introduce" v-else>
                                <header class="webkit-text-overflow-1lines" style="padding: 0 0 14px 0; border-bottom: 1px solid #fff;">{{ isNull0(videoDetailsData.title) }}</header>
                                <aside class="video-introduce-content" v-html="isNull0(videoDetailsData.content)"></aside>
                                <article style="border-bottom: 1px dashed #ccc;">
                                    <a-popover trigger="hover" placement="top"title="视频介绍">
                                        <template slot="content">
                                            <aside>
                                                <div v-html="isNull0(videoDetailsData.content)"></div>
                                            </aside>
                                        </template>
                                        <a href="javaScript:;"><i class="iconfont icon-chakan"></i> 详细信息</a>
                                    </a-popover>
                                </article>
                            </article>

                            <aside class="message-btn">
                                <a-button class="btn-danger btn-circle" size="large" @click.stop="cellMessageModal"><i class="iconfont icon-fabushijian"></i> 预约咨询</a-button>
                                <a-button class="btn-danger btn-circle" size="large" @click.stop="callMEIQIA"><i class="iconfont icon-fabushijian"></i> 立即咨询</a-button>
                            </aside>
                            <p class="tel"><i class="iconfont icon-dianhua"></i> 咨询电话 400-600-4982</p>
                            <div style="text-align: right; font-size: 16px;" v-if="videoDetailsData.houseId">
                                <router-link :to="{path: 'EstateDetails', query: {EstateHouseId: videoDetailsData.houseId }}" title="点击了解项目详情" alt="点击了解项目详情">点击了解项目详情 >></router-link>
                            </div>
                        </a-col>
                    </a-row >
                </article>
            </div>
        </div>

        <!--猜你喜欢房源视频-->
        <div class="recommend-houseVideo-box">
            <div class="container">
                <header class="clearfix">猜你喜欢 <router-link :to="{path: 'VideoSecondaryList', query: {type: 2 }}" class="right" title="查看更多房源视频" alt="查看更多房源视频">更多></router-link></header>
                <a-row :gutter="32" v-show="!noDataShow">
                    <a-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" class="aside" v-for="(item, index) in RecommendVideoItem" :key="index">
                        <a-card :title="null" hoverable :loading="recommendVideoListLoading">
                            <router-link :to="{path: 'VideoHouseDetails', query: {videoId: item.id }}" :title="item.title" :alt="item.title">
                                <img v-lazy="item.photo" :title="item.title" :alt="item.title"/>
                                <div class="font">
                                    <i class="iconfont icon-xuanchuanshipin"></i>
                                </div>
                            </router-link>
                            <div class="bottom transition">
                                <p class="webkit-text-overflow-1lines">{{isNull0(item.title)}}</p>
                                <p><i class="iconfont icon-yanjing2"></i> {{isNull0(item.pageView)}}</p>
                            </div>
                        </a-card>
                    </a-col>
                </a-row>
                <h5 style="text-align: center; padding: 15px;" v-show="noDataShow">暂未查询到数据！</h5>
            </div>
        </div>
        <!--中美置业团队-->
        <consultantTeam></consultantTeam>

        <!--返回顶部-->
        <BackTop :isShowHouseContrast="false"></BackTop>

        <!--客户咨询留言modal框——留言类型，type：1.购房意向、2.移民、3.留学、4.保险、5.1秒变身海外业主-->
        <clientMessageModal ref="MessageModal" :msgType="1"></clientMessageModal>

        <p v-show="false">{{getExchangeRate}}</p>

    </section>
</template>

<script>
    import Header from '../../components/header.vue';//公共组件——头部
    import consultantTeam from '../../components/consultantTeam.vue';//公共组件——中美置业团队
    import BackTop from '../../components/BackTop.vue';//公共组件——返回顶部
    import clientMessageModal from '../../components/clientMessageModal.vue';//公共组件——客户咨询留言modal框

    export default {
        data() {
            return {
                isLoggedIn: false,//用户是否登录

                exchangeRateUSD: {},//汇率数据——美元
                videoId: this.$route.query.videoId, // 视频id
                videoDetailsData: {}, // 房源视频详情数据
                EstateHouseDetails: {}, // 房源详情数据
                noDataShow: false,//没有数据提示信息是否显示
                RecommendVideoItem: [], // 猜你喜欢推荐视频数据
                recommendVideoListLoading: true, //猜你喜欢——列表加载loading

                metaInfo_title: '',//vue-meta动态管理头部标签-title
                metaInfo_keywords: '',//vue-meta动态管理头部标签-keywords
                metaInfo_description: '',//vue-meta动态管理头部标签-description

            }
        },
        metaInfo () {
            return {
                title: this.metaInfo_title,
                meta: [
                    { vmid: 'keywords', name: 'keywords', content: this.metaInfo_keywords },
                    { vmid: 'description', name: 'description', content: this.metaInfo_description },
                ],
            }
        },
        computed: {
            //从state获取汇率数据
            getExchangeRate() {
                if(this.$store.getters.get_exchangeRate){
                    //取出美元的汇率数据
                    this.$store.getters.get_exchangeRate.forEach((i) => {
                        if(i.currencyName == '美元'){
                            this.exchangeRateUSD = i;
                        }
                    });
                }
                return this.$store.getters.get_exchangeRate
            }
        },
        created() {
        },
        beforeRouteUpdate(to, from, next){
            next();
            // console.log(to, from, next)

            //判断是否是从直播看房视频详情页跳转进来，并且过滤判断hash值，即#后边的值（防止点击楼层导航触发beforeRouteUpdate，而造成发送下面两个接口）
            if(to.path == '/VideoHouseDetails' && to.hash == ''){
                this.videoId = to.query.videoId;
                //更新视频详情数据
                this.getVideoDetailsData();
            }
        },
        mounted() {
            this.getVideoDetailsData();     //获取视频详情数据
            this.getRecommendVideoData();   //获取猜你喜欢推荐视频数据
            //判断用户是否登录
            if(this.$store.getters.get_user.name != '' && this.$store.getters.get_user.headPhoto != ''){
                this.isLoggedIn = true;
            }else{
                this.isLoggedIn = false;
            }
        },
        methods: {
            // 获取视频详情数据
            getVideoDetailsData() {
                this.$get(`/video/detail/${this.videoId}`).then(res => {
                    if (res.status === 0) {
                        this.videoDetailsData = res.data;
                        this.metaInfo_title = res.data.seoTitle;
                        this.metaInfo_keywords = res.data.seoKeyword;
                        this.metaInfo_description = res.data.seoDescription;

                        //判断houseId值是否为空，有值=美国房源，空=希腊、泰国房源
                        if(res.data.houseId) {
                            //获取该视频房源的房源详情数据
                            this.$get('/house/detail/' + res.data.houseId).then(res => {
                                if (res.status == 0) {
                                    this.EstateHouseDetails = res.data;
                                } else {
                                    console.log(res.msg);
                                }
                            })
                        }
                    } else {
                        console.log(res.msg);
                    }
                })
            },
            // 获取猜你喜欢推荐视频数据
            getRecommendVideoData() {
                this.$get('/video/list/2/1/10?isRecommend=true').then(res => {
                    this.recommendVideoListLoading = false;
                    if (res.status == 0) {
                        this.RecommendVideoItem = res.list.splice(0, 3);
                        this.noDataShow = false;
                    } else {
                        console.log(res.msg);
                        this.noDataShow = true;
                    }
                })
            },
            //触发显示公共客户咨询留言modal框
            cellMessageModal(){
                this.$refs.MessageModal.$emit('handleMessageModal');
            },
            //触发公共登录modal框
            cell_header_handleLoginModal(){
                this.$refs.header.$emit('header_handleLoginModal');
            },

        },
        components: {
            'app-header': Header,//公共组件——头部
            consultantTeam,//公共组件——中美置业团队
            BackTop,//公共组件——返回顶部
            clientMessageModal,//公共组件——客户咨询留言modal框

        }
    }
</script>

<style lang="less" type="text/less">
    body {
        background: #f4f4f4;
        .VideoHouseDetails-box {
            .content {
                padding: 50px 0;
                background: #05263a;
                > .container {
                    >.title{
                        padding-bottom: 10px;
                        border-bottom: 1px solid #ddd;
                        margin-bottom: 20px;
                        color: #fff;
                        a,
                        span,
                        .ant-breadcrumb-separator{
                            font-size: 16px;
                            color: #fff;
                        }
                    }
                    >.main-content{
                        >h1{
                            margin: 12px 0 20px 0;
                            font-size: 25px;
                            color: #fff;
                            >span{
                                font-size: 14px;
                                margin: 0 0 0 40px;
                            }
                        }
                        >.ant-row{
                            /* 左侧房源视频 */
                            >.left-box{
                                padding: 0;
                                position: relative;
                                >.NotLoggedIn-box{
                                    position: absolute;
                                    top: 0;
                                    left: 0;
                                    width: 100%;
                                    height: 100%;
                                    text-align: center;
                                    /*display: flex;*/
                                    /*display: -webkit-flex;*/
                                    /*align-items: center;*/
                                    /*justify-content: center;*/

                                    display: table-cell;
                                    vertical-align: middle;

                                    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0, #fff 60%);
                                    background-color: rgba(255, 255, 255, .7);
                                    z-index: 9;
                                    >img{
                                        display: inline-block;
                                        width: 120px;
                                        margin: 100px 0 0 0;
                                    }
                                    >p{
                                        display: block;
                                        font-size: 16px;
                                        margin: 15px 0;
                                    }
                                    >.NotLoggedIn-box-bg{
                                        >img{
                                            width: 100%;
                                            min-height: 280px;
                                            max-height: 440px;
                                        }
                                    }
                                }
                                >.video-box{
                                    padding: 0;
                                    embed{
                                        width: 100%!important;
                                        min-height: 280px;
                                        max-height: 440px;
                                    }
                                    iframe{
                                        width: 100%!important;
                                        min-height: 280px!important;
                                        max-height: 440px!important;
                                    }
                                }
                            }
                            /* 右侧房源基本信息 */
                            > .right-box {
                                text-align: left;
                                color: #fff;
                                > .house-details {
                                    > header {
                                        margin: 0 0 12px 0;
                                        font-size: 20px;

                                        > span {
                                            margin: 0 12px;
                                        }

                                        > span:first-of-type {
                                            margin: 0 12px 0 0;
                                        }
                                    }

                                    > p {
                                        font-size: 18px;
                                        margin: 8px 0;

                                        > span {
                                            margin: 0 12px;
                                        }

                                        > span:first-of-type {
                                            margin: 0 12px 0 0;
                                        }
                                    }

                                    > p.red {
                                        font-size: 14px;
                                        color: #f95249;
                                    }

                                    > p.fullAddress {
                                        font-size: 14px;
                                    }

                                    > p.dashed-bottom-border {
                                        padding: 0 0 20px 0;
                                        border-bottom: 1px dashed #ccc;
                                    }

                                    > p.Door-model {
                                        margin: 20px 0 0 0;
                                    }
                                }
                                >.video-introduce{
                                    >.video-introduce-content{
                                        height: 250px;
                                        text-indent: 2em;
                                        overflow: hidden;
                                        text-overflow: ellipsis;
                                        display: -webkit-box;
                                        -webkit-box-orient: vertical;
                                        text-align: justify;
                                    }
                                }
                                > p.tel {
                                    text-align: center;
                                }
                                > .message-btn {
                                    text-align: center;
                                    margin: 12px 0;
                                    > button {
                                        background: #f95148;
                                        margin: 12px;
                                    }
                                }

                            }
                        }
                    }
                }
            }
            /* 猜你喜欢房源视频 */
            .recommend-houseVideo-box{
                padding: 50px 0;
                > .container {
                    padding: 0;
                    >header{
                        font-size: 22px;
                        text-align: center;
                        line-height: 40px;
                        >a{
                            font-size: 14px;
                            color: #000;
                        }
                    }
                    >.ant-row{
                        >.aside{
                            margin: 20px 0;
                            .ant-card {
                                border: none;
                                background: #f7f9fa;
                                -webkit-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                -moz-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                -ms-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                -o-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                > .ant-card-body {
                                    padding: 0;
                                    > a {
                                        display: block;
                                        width: 100%;
                                        height: 100%;
                                        position: relative;
                                        overflow: hidden;
                                        background: #000;
                                        > img {
                                            width: 100%;
                                            height: 250px;
                                            -webkit-transition: all linear 1s;
                                            -moz-transition: all linear 1s;
                                            transition: all linear 1s;
                                        }
                                        > .font {
                                            width: 100%;
                                            height: 100%;
                                            position: absolute;
                                            top: 0;
                                            left: 0;
                                            text-align: center;
                                            > i {
                                                font-size: 30px;
                                                color: #fff;
                                                position: absolute;
                                                top: 43%;
                                                left: 45%;
                                                z-index: 9;
                                                text-align: center;
                                                -webkit-border-radius: 50%;
                                                -moz-border-radius: 50%;
                                                border-radius: 50%;
                                                box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
                                                -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
                                                -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
                                                display: inline-block;
                                                opacity: 0;
                                                -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
                                                -moz-transition: -moz-transform 0.3s, opacity 0.3s;
                                                -o-transition: -o-transform 0.3s, opacity 0.3s;
                                                transition: transform 0.3s, opacity 0.3s;
                                            }
                                        }
                                    }
                                    > a:hover {
                                        > img {
                                            -webkit-transform: scale(1.1, 1.1);
                                            -moz-transform: scale(1.1, 1.1);
                                            transform: scale(1.1, 1.1);
                                            opacity: 0.5;
                                            filter: alpha(opacity=50);
                                        }
                                        > .font {
                                            > i {
                                                opacity: 1;
                                                -webkit-transform: scale(1);
                                                -moz-transform: scale(1);
                                                -ms-transform: scale(1);
                                                -o-transform: scale(1);
                                                transform: scale(1);
                                            }
                                        }
                                    }
                                    .bottom {
                                        padding: 10px 20px;
                                        border: 1px solid #eaebea;
                                        background: #fff;
                                        > header {
                                            font-size: 14px;
                                        }
                                        > p {
                                            font-size: 14px;
                                            > span {
                                                margin: 0 8px;
                                            }
                                            > span:first-of-type {
                                                margin: 0 8px 0 0;
                                            }
                                            margin-bottom: 0px;
                                        }
                                    }
                                }
                            }
                        }
                        .aside:hover{
                            >.ant-card{
                                -webkit-box-shadow: 0 0 0 #EFEFEF, 2px 2px 20px #B9B9B9;
                                -moz-box-shadow: 0 0 0 #EFEFEF, 2px 2px 20px #B9B9B9;
                                box-shadow: 0 0 0 #EFEFEF, 2px 2px 20px #B9B9B9;
                            }
                        }
                    }
                }
            }
        }
        .ant-popover{
            .ant-popover-title{
                text-align: center;
            }
            .ant-popover-inner-content{
                font-size: 14px;
                aside{
                    width: 300px;
                    height: 400px;
                    overflow-y: auto;
                }
            }
        }
    }
</style>
